import advance from '../advancedFilter.vue'
import {formatGMTDate,arrayToObject} from '../../../../assets/js/util.js'
import echarts from 'echarts'
export default {
    data() {
        return {
            // 默认参数 和 URL
            SRC: '',
            DP: {
                p: '',
                f: ''
            },
            // title
            title: "新玩家价值",
            xlsxTitle:'',
            /* 的宽*/
            pageWidth: '100%',
            /*当前页显示数量*/
            pageSize: 10,
            /*每页显示的数量*/
            pageSizes: [10, 20, 50, 100],
            /*dataTotal表数量*/
            dataTotal: 0,
            /*分页器*/
            currentPage: 1,
            // 选择的时间
            date: '',
            // 渠道数组
            plats: [],
            // 渠道数组
            channels: [],
            // 服务器数组
            servers: [],
            // 默认的一些时间范围
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近15天',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 15);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            postObj: {
                dstart: '2017-06-01',
                dend: '2017-06-07',
                platform: '0',
                channel: '0',
                server: '0'
            },
            userPayCompareData:[],//新玩家价值对比数据列表-平台
            userPayCompareChart :[],//新玩家价值对比图表-平台
            userPayCompareData1 :[],// 新玩家价值对比数据列表-渠道
            userPayCompareChart1 :[],//新玩家价值对比图表-渠道
            userPayCompareData2 :[],//新玩家价值对比数据列表-区服
            userPayCompareChart2 :[],//新玩家价值对比图表-区服
            activeName: '1',
            activeCompare: 'plat',
            isloading: true,
            // 全服在线详细数据 表头
            tableHeader: [
                {
                prop: 'date',
                label: '日期',
                width: '160px'
                }, {
                prop: 'addUser',
                label: '新增用户',
                width: 'auto'
            }, {
                prop: 'longin1',
                label: '登录比有效用户数',
                width: 'auto'
            }, {
                prop: 'longin2',
                label: '登录比留存用户数',
                width: 'auto'
            }, {
                prop: 'longin3',
                label: '一阶登录比',
                width: '180px'
            }, {
                prop: 'longin4',
                label: '二阶登录比',
                width: 'auto'
            }],

            playerAllTableHead: [],
            playerAllTableData: [],

            payTypesTabelHead: [],
            payTypesTabelData: [],

            compareTableHead: [],
            compareTableData: [],
            // 图表数据
            playerAllOption: {
                tooltip: {
                    trigger: 'axis'
                },
                color: ['#2eb398'],
                legend: {
                    top: '10px',
                    data: ['LTV值']
                },
                grid: {
                    left: '1%',
                    right: '1%',
                    bottom: '15%',
                    containLabel: true
                },
                toolbox: {
                    right: '20',
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        magicType: {
                            type: ['line', 'bar']
                        },
                        restore: {},
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    data: [],
                    axisLabel: {
                        margin: 20
                    }
                },
                yAxis: {
                    type: 'value'
                    // max: 10000
                },
                dataZoom: [{
                    handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                    handleSize: '100%',
                    handleStyle: {
                        color: '#fff',
                        shadowBlur: 3,
                        shadowColor: 'rgba(0, 0, 0, 0.6)',
                        shadowOffsetX: 2,
                        shadowOffsetY: 2
                    }
                }],
                series: [{
                    name: 'LTV值',
                    type: 'line',
                    smooth: true,
                    data: [],
                    symbol: 'circle'
                }]
            },
            payTrendOption: {
                tooltip: {
                    trigger: 'axis'
                },
                color: ['#2eb398', 'blue', 'red', 'purple'],
                legend: {
                    top: '10px',
                    data: ['7日LTV', '14日LTV', '30日LTV', '60日LTV']
                },
                grid: {
                    left: '1%',
                    right: '1%',
                    bottom: '15%',
                    containLabel: true
                },
                toolbox: {
                    right: '40',
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        magicType: {
                            type: ['line', 'bar']
                        },
                        restore: {},
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    data: [],
                    axisLabel: {
                        margin: 20
                    }
                },
                yAxis: {
                    type: 'value'
                    // max: 10000
                },
                dataZoom: [{
                    handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                    handleSize: '100%',
                    handleStyle: {
                        color: '#fff',
                        shadowBlur: 3,
                        shadowColor: 'rgba(0, 0, 0, 0.6)',
                        shadowOffsetX: 2,
                        shadowOffsetY: 2
                    }
                }],
                series: [{
                    name: '7日LTV',
                    type: 'line',
                    smooth: true,
                    data: [],
                    symbol: 'circle'
                }, {
                    name: '14日LTV',
                    type: 'line',
                    smooth: true,
                    data: [],
                    symbol: 'circle'
                }, {
                    name: '30日LTV',
                    type: 'line',
                    smooth: true,
                    data: [],
                    symbol: 'circle'
                }, {
                    name: '60日LTV',
                    type: 'line',
                    smooth: true,
                    data: [],
                    symbol: 'circle'
                }
                ]
            },
            platContrastOption: {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                legend: {
                    data: []
                },
                grid: {
                    left: '3%',
                    right: '8%',
                    bottom: '3%',
                    // containLabel: true
                },
                xAxis: [
                    {
                        type: 'value',
                        axisLabel: {
                            formatter: function (value) {
                                return value + "%";
                            }
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'category',
                        data: []
                    }
                ],
                color: ['#2eb398', 'rgb(72, 151, 241)', 'rgb(13, 35, 58)', 'red'],
                tooltip: [{
                    trigger: 'axis',
                    formatter: function (a) {
                        var temp = '';
                        for (var i = 0, len = a.length; i < len; i++) {
                            temp = temp + a[i].seriesName + ':' + a[i].value + '%' + '</br>';
                        }
                        return a[0].name + '</br>' + temp;

                    }
                }],
                dataZoom: [{
                    right: '5%',
                    type: 'slider',
                    show: true,
                    yAxisIndex: [0],
                    start: 1,
                    end: 100
                }, {
                    type: 'inside',
                    yAxisIndex: [0],
                    start: 1,
                    end: 100
                }],
                series: [
                    {
                        name: '安1111卓',
                        type: 'bar',
                        data: [],
                        // barWidth: '40px',
                        label: {
                            normal: {
                                show: true,
                                position: 'top',
                                formatter: function (value) {
                                    return value.value + "%";
                                }
                            }

                        }
                    },
                    {
                        name: 'iOS',
                        type: 'bar',
                        data: [],
                        // barWidth: '40px',
                        label: {
                            normal: {
                                show: true,
                                position: 'top',
                                formatter: function (value) {
                                    return value.value + "%";
                                }
                            }

                        }
                    }
                ]
            },
            channelContrastOption: {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                legend: {
                    data: []
                },
                grid: {
                    left: '3%',
                    right: '8%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [{
                    type: 'value',
                }],
                yAxis: [{
                    type: 'category',
                    data: [],
                    axisLabel:{
                        // interval:10,
                        // rotate:45,//倾斜度 -90 至 90 默认为0
                        margin:30,
                    },
                }],
                color: ['#2eb398', 'rgb(72, 151, 241)', 'rgb(13, 35, 58)', 'red'],
                tooltip: [{
                    trigger: 'axis',
                    formatter: function (a) {
                        var temp = '';
                        for (var i = 0, len = a.length; i < len; i++) {
                            temp = temp + a[i].seriesName + ':' + a[i].value + '%' + '</br>';
                        }
                        return a[0].name + '</br>' + temp;

                    }
                }],
                dataZoom: [{
                    right: '5%',
                    type: 'slider',
                    show: true,
                    yAxisIndex: [0],
                    start: 1,
                    end: 100
                }, {
                    type: 'inside',
                    yAxisIndex: [0],
                    start: 1,
                    end: 100
                }],
                series: [{
                    name: '安1111卓',
                    type: 'bar',
                    data: [],
                    barWidth: '5px',
                    label: {
                        normal: {
                            show: true,
                            position: 'top',
                            formatter: function (value) {
                                return value.value + "%";
                            }
                        }

                    }
                }, {
                    name: 'iOS',
                    type: 'bar',
                    data: [],
                    barWidth: '5px',
                    label: {
                        normal: {
                            show: true,
                            position: 'top',
                            formatter: function (value) {
                                return value.value + "%";
                            }
                        }

                    }
                }]
            },
            serverContrastOption: {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                legend: {
                    data: []
                },
                grid: {
                    left: '5%',
                    right: '8%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'value'
                    }
                ],
                yAxis: [
                    {
                        // type: 'category',
                        data: [],
                        axisLabel:{
                            // interval:10,
                            // rotate:45,//倾斜度 -90 至 90 默认为0
                            margin:20,
                        },
                    }
                ],
                color: ['#9d79d8', 'rgb(101, 206, 150)', 'rgb(13, 35, 58)', 'red'],
                dataZoom: [{
                    right: '5%',
                    type: 'slider',
                    show: true,
                    yAxisIndex: [0],
                    start: 1,
                    end: 100
                }, {
                    type: 'inside',
                    yAxisIndex: [0],
                    start: 1,
                    end: 100
                }],
                series: [
                    {
                        name: '安1111卓',
                        type: 'bar',
                        data: [],
                        label: {
                            normal: {
                                show: true,
                                position: 'top',
                                formatter: function (value) {
                                    return value.value + "%";
                                }
                            }

                        }
                    },
                    {
                        name: 'iOS',
                        type: 'bar',
                        data: [],
                        label: {
                            normal: {
                                show: true,
                                position: 'top',
                                formatter: function (value) {
                                    return value.value + "%";
                                }
                            }

                        }
                    }
                ]
            }
        }
    },
    computed: {
        // xlsx(){
        //     return this.title + '.xlsx';
        // }
    },
    methods: {
        chartsWidth (el){
            if (document.getElementById(el) !== null) {
                document.getElementById(el).style.width = window.innerWidth - 261 + "px";
            }
        },
        //初始化
        _init() {
            var arr = ['playerAll', 'platContrast', 'channelContrast', 'serverContrast', 'payTrend'];
            //      新玩家价值总体数据    平台对比           渠道对比            区服对比       新玩家价值
            for (var x = 0; x < arr.length; x++) {
                this.chartsWidth(arr[x]);
                this[arr[x] + 'Charts'] = echarts.init(document.getElementById(arr[x]));
                this[arr[x] + 'Charts'].setOption(this[arr[x] + 'Option']);
            }
            window.addEventListener('resize', function () {
                /*修改表格的宽度*/
                this.realTimeServiceTableWidth = document.body.clientWidth - 240 + "px";
                this.realTimeServiceContent = document.body.clientWidth - 220 + "px";

                for (var i in arr) {
                    this.chartsWidth(arr[i])
                }
                var resizeArr = ['playerAllCharts', 'platContrastCharts', 'channelContrastCharts', 'serverContrastCharts', 'payTrendCharts'];
                //                新玩家价值总体数据          平台对比           渠道对比                    区服对比                 新玩家价值
                for (var j in resizeArr) {
                    this[resizeArr[j]].resize();
                }
            }.bind(this))
        },
        // 通用 成功 与 失败
        successFun(data) {
            this.$message({
                message: data,
                type: 'success'
            });
        },
        errorFun(data) {
            this.$message.error(data);
        },
        // 分页器
        // 控制每页的数量
        handleSizeChange(val) {
            this.pageSize = val;
            this.tableControl();
        },
        // 页数
        handleCurrentChange(val) {
            this.currentPage = val;
            this.tableControl();
        },
        tableControl() {
            this.tableData = this.tableDataAll.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
        },
        // 选择游戏的平台
        handleSelect(key, keyPath) {
            if (key === '4') {
                this.$refs.advance.filterShow = true;
            } else {
                this.postObj['platform'] = key;
                this.postObj['server'] = '0';
                this.postObj['channel'] = '0';
                this.getData(this.postObj);
            }
        },
        // 改变时间
        dateChange(val) {
            if (val === undefined) {
                this.errorFun('请选择查看时间！')
            } else {
                var t = val.split(' - ');
                this.postObj.dstart = t[0];
                this.postObj.dend = t[1];
            }
            this.getData(this.postObj);
        },
        // 获取服务器list 平台list  服务器list
        getList(url,choose) {
            var that = this;
            var pushData = function (pushArr, attr, data) {
                that[pushArr] = [];
                for (var i in data[attr]) {
                    that[pushArr].push({
                        value: i,
                        label: data[attr][i]
                    })
                }
            };
            this.$http.jsonp(`${that.SRC}data/get.do?p=${that.DP.p}&f=${that.DP.f}&a=${url}`,{
                params:{'ps': choose }
            }).then(function (res) {
                var data = JSON.parse(JSON.parse(res.body));
                if (parseInt(data["res"]) === 0) {
                    // 后台select的数据
                    var lists = ["platformItmes", "channelItmes", "serverItmes"];
                    // 页面select名字
                    var nameLists = ["plats", "channels", "servers"];
                    for (var i = 0; i < lists.length; i++) {
                        if (data[lists[i]] !== undefined) {
                            pushData(nameLists[i], lists[i], data);
                        }
                    }
                } else {
                    this.getErrorMsg(Number(data.res))
                }
            })
        },
        // 获取数据
        getData(data) {
            var that = this;
            var p = new Promise(function (resolve, reject) {
                that.$http.jsonp(`${that.SRC}data/get.do?p=${that.DP.p}&f=${that.DP.f}&a=search`, {
                    params: {'ps':`dstart=${data.dstart}&dend=${data.dend}&platform=${data.platform}&channel=${data.channel}&server=${data.server}`}
                }).then(function (res) {
                    resolve(res.body)
                })
            });
            p.then(function (value) {
                var data = JSON.parse(value);
                data = JSON.parse(data.replace(/\"\{\"/g, '\{\"').replace(/\"\}\"/g, '\"\}'));
                if (parseInt(data["res"]) === 0) {
                    that.echartsData(data);
                    that.tableConfig1(data['userPayData']);
                    that.tableConfig2(data['userPayValueData']);

                    that.userPayCompareData = data['userPayCompareData'];//新玩家价值对比数据列表-平台
                    that.userPayCompareChart = data['userPayCompareChart'];//新玩家价值对比图表-平台
                    that.userPayCompareData1 = data['userPayCompareData1'];// 新玩家价值对比数据列表-渠道
                    that.userPayCompareChart1 = data['userPayCompareChart1'];//新玩家价值对比图表-渠道
                    that.userPayCompareData2 = data['userPayCompareData2'];//新玩家价值对比数据列表-区服
                    that.userPayCompareChart2 = data['userPayCompareChart2'];//新玩家价值对比图表-区服

                    that.menuChange(that.activeCompare)

                } else {
                    that.errorFun(data['msg']);
                }
            })
        },
        //点击tab获取新数据
        handleClick(tab, event) {
            this.menuChange(tab.name)
        },
        menuChange(val){
            switch (val){
                case 'plat':
                    this.activeCompare = val; 
                    this.echartsData2(val,this.userPayCompareChart);
                    this.tableConfig3(this.userPayCompareData);
                    break;
                case 'channel': 
                    this.activeCompare = val; 
                    this.echartsData2(val,this.userPayCompareChart1);
                    this.tableConfig3(this.userPayCompareData1);
                    break;
                case 'server':
                    this.activeCompare = val;
                    this.echartsData2(val,this.userPayCompareChart2);
                    this.tableConfig3(this.userPayCompareData2);
                    break;
            }
            
        },
        // 改变表数据
        echartsData(data){
            this.isloading = false;
            if(data.userPayChart === undefined){
                var PayValue = {
                    "columnkeys":[],
                    "names":[],
                    "data":[[]]
                }
            }else{
                var PayValue = data['userPayChart']['jsonStr'];
            }
            // 新玩家价值总体数据
            this.playerAllCharts.setOption({
                legend: {
                    data: PayValue['names']
                },
                xAxis: {
                    data: PayValue.columnkeys
                },
                series: [
                    {
                        name: PayValue.names[0],
                        data: PayValue.data[0]
                    }
                ]
            });
            //新玩家价值
            if(data.userPayValueChart === undefined){
                var userPayValue = {
                    "columnkeys":[],
                    "names":[],
                    "data":[[]]
                }
            }else{
                var userPayValue = data['userPayValueChart']['jsonStr'];
            }
            // 将0变成 -
            function zeroConfig(data){
                for(var i=0; i<data.length; i++){
                    if(data[i] === 0){
                        data[i] = '-'
                    }
                }
                return data;
            }

            this.payTrendCharts.setOption({
                legend: {
                    data: userPayValue['names']
                },
                xAxis: {
                    data: userPayValue.columnkeys
                },
                series: [
                    {
                        symbolSize: 8,
                        name: userPayValue.names[0],
                        data: zeroConfig(userPayValue.data[0])
                    },
                    {
                        symbolSize: 8,
                        name: userPayValue.names[1],
                        data: zeroConfig(userPayValue.data[1])
                    },
                    {
                        symbolSize: 8,
                        name: userPayValue.names[2],
                        data: zeroConfig(userPayValue.data[2])
                    },
                    {
                        symbolSize: 8,
                        name: userPayValue.names[3],
                        data: zeroConfig(userPayValue.data[3])
                    }
                ]
            });
        },
        echartsData2(tab, data){
            if(data === undefined){
                data['jsonStr'] = {
                    "columnkeys":[],
                    "names":[],
                    "data":[[]]
                }
                var PayCompare = data;
            }else{
                var PayCompare = data['jsonStr'];
            }
            if (tab == 'plat') {
                this.platContrastCharts.setOption({
                    legend: {
                        data: PayCompare['names']
                    },
                    yAxis: {
                        data: PayCompare.columnkeys
                    },
                    series: [
                        {
                            name: PayCompare.names[0],
                            data: PayCompare.data[0],
                            type: 'bar',
                            symbol: 'circle'
                        },
                        {
                            name: PayCompare.names[1],
                            data: PayCompare.data[1],
                            type: 'bar',
                            symbol: 'circle'
                        },
                        {
                            name: PayCompare.names[2],
                            data: PayCompare.data[2],
                            type: 'bar',
                            symbol: 'circle'
                        },
                        {
                            name: PayCompare.names[3],
                            data: PayCompare.data[3],
                            type: 'bar',
                            symbol: 'circle'
                        }
                    ]
                });
            } else if (tab == 'channel') {
                this.channelContrastCharts.setOption({
                    legend: {
                        data: PayCompare['names']
                    },
                    yAxis: {
                        data: PayCompare.columnkeys,
                        // offset: 20
                    },
                    series: [
                        {
                            name: PayCompare.names[0],
                            data: PayCompare.data[0],
                            type: 'bar',
                            symbol: 'circle',
                            label: {
                                normal: {
                                    show: true,
                                    position: 'insideRight',
                                    textStyle: {
                                        color: '#000'
                                    }
                                }
                            }
                        },
                        {
                            name: PayCompare.names[1],
                            data: PayCompare.data[1],
                            type: 'bar',
                            symbol: 'circle',
                            label: {
                                normal: {
                                    show: true,
                                    position: 'insideRight',
                                    textStyle: {
                                        color: '#000'
                                    }
                                }
                            }
                        },
                        {
                            name: PayCompare.names[2],
                            data: PayCompare.data[2],
                            type: 'bar',
                            symbol: 'circle',
                            label: {
                                normal: {
                                    show: true,
                                    position: 'insideRight',
                                    textStyle: {
                                        color: '#000'
                                    }
                                }
                            }
                        },
                        {
                            name: PayCompare.names[3],
                            data: PayCompare.data[3],
                            type: 'bar',
                            symbol: 'circle',
                            label: {
                                normal: {
                                    show: true,
                                    position: 'insideRight',
                                    textStyle: {
                                        color: '#000'
                                    }
                                }
                            }
                        }
                    ]
                });
            } else {
                this.serverContrastCharts.setOption({
                    legend: {
                        data: PayCompare['names']
                    },
                    yAxis: {
                        data: PayCompare.columnkeys,
                        offset: 20
                    },
                    series: [
                        {
                            name: PayCompare.names[0],
                            data: PayCompare.data[0],
                            type: 'bar',
                            symbol: 'circle',
                            label: {
                                normal: {
                                    show: true,
                                    position: 'insideRight',
                                    textStyle: {
                                        color: '#000'
                                    }
                                }
                            }
                        },
                        {
                            name: PayCompare.names[1],
                            data: PayCompare.data[1],
                            type: 'bar',
                            symbol: 'circle',
                            label: {
                                normal: {
                                    show: true,
                                    position: 'insideRight',
                                    textStyle: {
                                        color: '#000'
                                    }
                                }
                            }
                        },
                        {
                            name: PayCompare.names[2],
                            data: PayCompare.data[2],
                            type: 'bar',
                            symbol: 'circle',
                            label: {
                                normal: {
                                    show: true,
                                    position: 'insideRight',
                                    textStyle: {
                                        color: '#000'
                                    }
                                }
                            }
                        },
                        {
                            name: PayCompare.names[3],
                            data: PayCompare.data[3],
                            type: 'bar',
                            symbol: 'circle',
                            label: {
                                normal: {
                                    show: true,
                                    position: 'insideRight',
                                    textStyle: {
                                        color: '#000'
                                    }
                                }
                            }
                        }
                    ]
                });
            }
        },
        // 新玩家价值总体数据表格
        tableConfig1(data) {
            var newAllTableHead = data.map(function (item, index) {
                var headItem = {};
                headItem.prop = String(item.id);
                headItem.label = item.name;
                headItem.width = '120px';
                return headItem
            });
            this.playerAllTableHead = newAllTableHead;
            var newAllTableData = [];
            var dataItem = {};
            data.map(function (item, index) {
                dataItem[String(item.id)] = item.ltv;
            });
            newAllTableData.push(dataItem);
            this.playerAllTableData = newAllTableData
        },
        tableConfig2(data) {
            var newPayTypesTabelHead = [
                {prop: '0', label: '日期'},
                {prop: '11', label: "新增账号数"},
                {prop: '1', label: '1日LTV'},
                {prop: '2', label: '2日LTV'},
                {prop: '3', label: '3日LTV'},
                {prop: '4', label: '4日LTV'},
                {prop: '5', label: '5日LTV'},
                {prop: '6', label: '6日LTV'},
                {prop: '7', label: '7日LTV'},
                {prop: '14', label: '14日LTV'},
                {prop: '30', label: '30日LTV'},
                {prop: '60', label: '60日LTV'},
                {prop: '90', label: '90日LTV'},
                {prop: '120', label: '120日LTV'}
            ];
            this.payTypesTabelHead = newPayTypesTabelHead;
            var newPayTypesTabelData = data.map(function (item, index) {
                var dataItem = {};
                dataItem['0'] = item.dateStr;
                dataItem['11'] = item.newUser;
                dataItem['1'] = item.the1ltv;
                dataItem['2'] = item.the2ltv;
                dataItem['3'] = item.the3ltv;
                dataItem['4'] = item.the4ltv;
                dataItem['5'] = item.the5ltv;
                dataItem['6'] = item.the6ltv;
                dataItem['7'] = item.the7ltv;
                dataItem['14'] = item.the14ltv;
                dataItem['30'] = item.the30ltv;
                dataItem['60'] = item.the60ltv;
                dataItem['90'] = item.the90ltv;
                dataItem['120'] = item.the120ltv;
                return dataItem
            });
            this.payTypesTabelData = newPayTypesTabelData;
        },
        tableConfig3(data) {
            var newCompareTableHead = [
                {prop: '0', label: '分类'},
                {prop: '11', label: "新增账号数"},
                {prop: '1', label: '1日LTV'},
                {prop: '2', label: '2日LTV'},
                {prop: '3', label: '3日LTV'},
                {prop: '4', label: '4日LTV'},
                {prop: '5', label: '5日LTV'},
                {prop: '6', label: '6日LTV'},
                {prop: '7', label: '7日LTV'},
                {prop: '14', label: '14日LTV'},
                {prop: '30', label: '30日LTV'},
                {prop: '60', label: '60日LTV'},
                {prop: '90', label: '90日LTV'},
                {prop: '120', label: '120日LTV'}
            ];
            this.compareTableHead = newCompareTableHead;
            var newCompareTableData = data.map(function (item, index) {
                var dataItem = {};
                dataItem['0'] = item.classStr;
                dataItem['11'] = item.newUser;
                dataItem['1'] = item.the1ltv;
                dataItem['2'] = item.the2ltv;
                dataItem['3'] = item.the3ltv;
                dataItem['4'] = item.the4ltv;
                dataItem['5'] = item.the5ltv;
                dataItem['6'] = item.the6ltv;
                dataItem['7'] = item.the7ltv;
                dataItem['14'] = item.the14ltv;
                dataItem['30'] = item.the30ltv;
                dataItem['60'] = item.the60ltv;
                dataItem['90'] = item.the90ltv;
                dataItem['120'] = item.the120ltv;
                return dataItem
            });
            this.compareTableData = newCompareTableData;
        },
        // 表格下载
        excel(tabelHead, data, val) {
            this.xlsxTitle = val+"-"+this.postObj.dstart+"到"+this.postObj.dend;
            this.downloadExl(tabelHead, data,this.xlsxTitle, val);
        }
    },
    components: {
        'v-advance': advance
    },
    mounted() {
        // 初始化URL
        this.SRC = this.$store.getters.src;
        this.DP.p = localStorage.getItem('ZULONGBIPROJECTID');
        this.DP.f = localStorage.getItem('ZULONGBIPAGEID');
        // 初始化时间
        this.date = [new Date().getTime() - 604800000, new Date().getTime() - 86400000];
        this.postObj.dstart = formatGMTDate(new Date().getTime() - 604800000, true);
        this.postObj.dend = formatGMTDate(new Date().getTime() - 86400000, true);
        this._init();
        // 获取到服务器 平台 渠道 list
        this.getList("initParam","");
        this.getData(this.postObj);
        // //实时图
        //this.playerAllChart = echarts.init(document.getElementById('playerAll'));
        //this.playerAllChart.setOption(this.real);
    }
}